<div class="container">
  <div class="columns-12" style="background-color: white">
    <div class="col-3">
      <%= image_tag @user.avatar.url(:medium), :class => 'circle' %>
    </div>
    <div class="col-9">
      <p style="font-size: 30px; border-bottom: 2px solid #e2e2e2; margin-right: 20px;" class="tp"><%= @user.name %><span class="panel-segment-title3"><%= "(#{@user.email})" %></span></p>
      <div style="align-content: center">
        <% @user.badges.first(5).each do |b| %>
            <%= image_tag b.custom_fields[:image], :class => "badge-pop-over-#{b.name}" %>
            <script>
              $(".badge-pop-over-"+"<%= b.name %>").tooltip({
                container: 'body',
                trigger: 'hover',
                placement: 'bottom',
                title: "<%= b.custom_fields[:display_name] %>"
              })
            </script>
        <%end%>
      </div>
    </div>
  </div>
  <div class="columns-12" style="background-coloe: white">
    <div class="col-5">
      <%= pie_chart Record.solved(current_user.id) %>
    </div>
    <div class="col-7" id="chart">
    </div>
  </div>
</div>
<script>
  $(function () {
    $.getJSON('/trend.json?id=<%= @id %>', function (data) {
      Highcharts.setOptions({
        global: {
          useUTC: false
        }
      });

      $('#chart').highcharts({
        chart: {
          zoomType: 'x'
        },
        title: {
          text: '',
        },
        xAxis: {
          title: {
            text: '<%= t("page_ranking.date") %>'
          },
          type: 'datetime'
        },
        yAxis: {
          min: 0,
          title: {
            text: '<%= t("page_ranking.score") %>'
          }
        },
        tooltip: {
          valueSuffix: ' <%= t("page_ranking.pts") %>',
          shared: true,
          crosshairs: true
        },
        plotOptions: {
          series: {
            cursor: 'pointer',
            point: {
              events: {
                click: function (e) {
                  hs.htmlExpand(null, {
                    pageOrigin: {
                      x: e.pageX || e.clientX,
                      y: e.pageY || e.clientY
                    },
                    headingText: this.series.name,
                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                    this.series.cate + ' solved',
                    width: 200
                  });
                }
              }
            },
            marker: {
              lineWidth: 1
            }
          }
        },
        legend: {
          enabled: false
        },
        series: data
      });
    });
  });
</script>